<!-- 热门线路-->
<template>
  <div id="trainHotLineDiv">
<!--    热门路线  -->
    <el-form id="trainHotLineForm">
      <div id="trainHotTitle"><img  src="../../assets/images-train/train-hot-log.png">热门路线</div>
      <div id="trainHotPlace"><el-button id="trainButton" @click="hotLinePlace(item.value)" v-for="item in HotPlace">{{item.value}}</el-button></div>
      <el-row id="trainHotRow" v-for="items in showPlace">
        <el-button id="trainHotButton" v-for="item in items" @click="toTrainSearchResult(item.startPlace,item.endPlace)">{{item.startPlace}}-->{{item.endPlace}}</el-button>
      </el-row>
    </el-form>
<!--    常见问题  -->
    <el-form id="trainQuestion">
      <div id="trainCommonQuestion">常见问题</div>
      <el-collapse accordion>
        <el-collapse-item class="trainCollapseItem" title="Q 1提示身份验证失败是什么意思？" name="1">
          <div class="trainCollapseItemDiv">
            如果您的姓名和身份信息都填写正确仍提示您乘客未通过身份核验，建议您前往火车站或者是代售点购票，
            并在火车站进行实名验证，下次即可在网上购票了。
          </div>
        </el-collapse-item>
        <el-collapse-item class="trainCollapseItem" title="Q 2我要办理退票，手续费是多少？" name="2">
          <div class="trainCollapseItemDiv">
            开车前15天以上不收取退票费；开车前48小时以上，手续费 5%；开车前24-48小时之间，手续费10%；
            开车前24小时内，手续费20%；最终退款以铁路局实退为准。
          </div>
        </el-collapse-item>
        <el-collapse-item class="trainCollapseItem" title="Q 3火车票可以提前几天预定？" name="3">
          <div class="trainCollapseItemDiv">
            铁路互联网售票、电话订票的预售期为30天。
          </div>
        </el-collapse-item>
        <el-collapse-item class="trainCollapseItem" title="Q 4我想买下铺，能自己选吗？" name="4">
          <div class="trainCollapseItemDiv">
            互联网售票铺位是随机分配的，不能自主选择铺位，以实际占的铺位为准。如果必须要下铺，建议您去火车站或代售点购买。
          </div>
        </el-collapse-item>
        <el-collapse-item class="trainCollapseItem" title="Q 5没赶上火车，怎么办？能退票或者改签吗？" name="5">
          <div class="trainCollapseItemDiv">
            铁路部门规定，旅客必须在发车前办理退票。如发车时间已过，可在当天协调改签，具体请至票面始发站退票窗口咨询办理。
          </div>
        </el-collapse-item>
      </el-collapse>

    </el-form>

  </div>

</template>

<script>
import store from "../../store";
import router from "../../router"
export default {
  name: "HotLine",
  data(){
    return{
        HotPlace:[
          {value:"上海"},
          {value:"北京"},
          {value:"深圳"},
          {value:"重庆"},
          {value:"成都"}
        ],
      showPlace:[[]],
      }
    },
  methods:{
    hotLinePlace(value){
      if(value=="上海"){
        this.showPlace = this.shanghai();
      }
      if(value=="北京"){
        this.showPlace = this.beijing();
      }
      if(value=="深圳"){
        this.showPlace = this.shenzhen();
      }
      if(value=="重庆"){
        this.showPlace = this.chongqing();
      }
      if(value=="成都"){
        this.showPlace = this.chengdu();
      }
    },
    shanghai(){
      return[
      [{startPlace:"上海", endPlace:"苏州"}, {startPlace:"上海", endPlace:"无锡"}, {startPlace:"上海", endPlace:"南京"}, {startPlace:"上海", endPlace:"常州"},],
      [{startPlace:"上海", endPlace:"西安"},{startPlace:"上海", endPlace:"合肥"},{startPlace:"上海", endPlace:"广州东"},{startPlace:"上海", endPlace:"郑州"},],
      [{startPlace:"上海", endPlace:"太原"},{startPlace:"上海虹桥", endPlace:"北京南"},{startPlace:"上海虹桥", endPlace:"长沙"},{startPlace:"上海虹桥", endPlace:"宁波"},],
      ]
    },
    beijing(){
      return [
        [{startPlace:"北京南", endPlace:"上海虹桥"},{startPlace:"北京南", endPlace:"天津"},{startPlace:"北京南", endPlace:"青岛"}, {startPlace:"北京南", endPlace:"南京南"},],
        [{startPlace:"北京南", endPlace:"济南西"},{startPlace:"北京南", endPlace:"合肥"},{startPlace:"北京南", endPlace:"杭州东"},{startPlace:"北京南", endPlace:"徐州东"},],
        [{startPlace:"北京南", endPlace:"苏州北"},{startPlace:"北京南", endPlace:"济南"},{startPlace:"北京南", endPlace:"沈阳北"},{startPlace:"北京南", endPlace:"长春"},],
      ]
    },
    shenzhen(){
      return[
        [{startPlace:"深圳北", endPlace:"厦门北"}, {startPlace:"深圳北", endPlace:"广州南"}, {startPlace:"深圳北", endPlace:"长沙南"}, {startPlace:"深圳北", endPlace:"武汉"},],
        [{startPlace:"深圳北", endPlace:"福州南"},{startPlace:"深圳北", endPlace:"潮汕"},{startPlace:"深圳北", endPlace:"衡阳东"},{startPlace:"深圳北", endPlace:"普宁"},],
        [{startPlace:"深圳北", endPlace:"泉州"},{startPlace:"深圳北", endPlace:"杭州东"},{startPlace:"深圳北", endPlace:"北京西"},{startPlace:"深圳北", endPlace:"桂林北"},],
      ]
    },
    chongqing(){
      return[
        [{startPlace:"重庆北", endPlace:"成都东"}, {startPlace:"重庆北", endPlace:"成都"}, {startPlace:"重庆北", endPlace:"广州"}, {startPlace:"重庆北", endPlace:"北京西"},],
        [{startPlace:"重庆北", endPlace:"汉口"},{startPlace:"重庆北", endPlace:"合川"},{startPlace:"重庆北", endPlace:"西安"},{startPlace:"重庆北", endPlace:"涪陵北"},],
        [{startPlace:"重庆北", endPlace:"遂宁"}],
      ]
    },
    chengdu(){
      return[
        [{startPlace:"成都东", endPlace:"重庆北"}, {startPlace:"成都东", endPlace:"南充"}, {startPlace:"成都东", endPlace:"达州"}, {startPlace:"成都东", endPlace:"贵阳"},],
        [{startPlace:"成都东", endPlace:"遂宁"},{startPlace:"成都东", endPlace:"广安南"},{startPlace:"成都东", endPlace:"汉口"},{startPlace:"成都东", endPlace:"长沙"},],
        [{startPlace:"成都东", endPlace:"杭州东"}],
      ]
    },
    toTrainSearchResult(startPlace ,endPlace ){
      store.state.trainSearchInfo.startPlace = startPlace;
      store.state.trainSearchInfo.endPlace = endPlace;
      if(new Date().getDate()<10){
        store.state.trainSearchInfo.date = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+'0'+new Date().getDate();
      }else{
        store.state.trainSearchInfo.date = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate();
      }
      console.log(store.state.trainSearchInfo.date);
      router.push(`/train-search-result`);
    }
  },
  mounted() {
    this.showPlace = this.shanghai();
  }
}
</script>

<style scoped>
#trainHotLineDiv{
  margin-left: 150px;
  width: 1200px;
  height: 500px;
  /*border: 1px solid red;*/
}
#trainQuestion{
  float: right;
  width: 30%;
  height: 550px;
  /*border: 1px solid darkblue;*/
}

#trainHotLineForm{
  float: left;
  height: 550px;
  width: 70%;
  /*border: 1px solid green;*/
}
#trainHotTitle{
  text-align: left;
  color: #ff7a21;
  font-size: 26px;
  height: 50px;
  width: 840px;
}
#trainHotPlace{
  text-align: left;
  height: 40px;
  width: 790px;
  border-top: 1px dashed #ccc;
}
#trainButton{
  border: none;
}
#trainHotRow{
  height: 150px;
}
#trainHotButton{
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  background: #f5f5f5;
  margin-right: 30px;
  width: 165px;
  height: 100px;
}
#trainCommonQuestion{
  text-align: left;
  font-size: 30px;
  height: 50px;
  border-bottom: 1px dashed #ccc;
}
.trainCollapseItem{
  color: #2da1e7;
  background: #99a9bf;
}
.trainCollapseItemDiv{
  color: #666;
  text-align: left;
  font-size: 13px;
  background: #eff3f7;
}


</style>